
<!-- 引入 jQuery 和 DataTables -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        console.log('文档加载完成，开始初始化表格插件');

        // 初始化表格插件
        $('table').DataTable({
            "paging": true,       // 启用分页功能
            "searching": true,    // 启用搜索功能
            "ordering": true,     // 启用排序功能
            "info": true,         // 显示表格信息
            "autoWidth": false,   // 禁用自动调整宽度
            "pageLength": 25,     // 默认每页显示25行数据
            "language": {         // 完全自定义中文语言配置
                "decimal": "",
                "emptyTable": "暂无数据",
                "info": "显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条",
                "infoEmpty": "显示第 0 至 0 条，共 0 条",
                "infoFiltered": "（从 _MAX_ 条数据中筛选）",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "每页显示 _MENU_ 条",
                "loadingRecords": "加载中...",
                "processing": "处理中...",
                "search": "搜索：",
                "zeroRecords": "未找到匹配数据",
                "paginate": {
                    "first": "首页",
                    "last": "末页",
                    "next": "下一页",
                    "previous": "上一页"
                },
                "aria": {
                    "sortAscending": "：升序排列",
                    "sortDescending": "：降序排列"
                }
            }
        });

        console.log('表格插件初始化完成');
    });
</script>

{% extends "base.html" %}

{% block title %}品种管理 - 交易监控系统{% endblock %}

{% block content %}
<div class="page-header">
    <h1>品种管理</h1>
    {% if request.state.user_type in ['super_admin', 'admin', 'operator'] %}
    <a href="/products/add" class="btn btn-primary">
        <i class="fas fa-plus"></i> 添加品种
    </a>
    {% endif %}
</div>

<style>
    th[data-sort] {
        cursor: pointer;
        position: relative;
        padding-right: 20px;
    }
    th[data-sort]::after {
        content: "⇅";
        position: absolute;
        right: 5px;
        opacity: 0.3;
    }
    th[data-sort].asc::after {
        content: "↑";
        opacity: 1;
    }
    th[data-sort].desc::after {
        content: "↓";
        opacity: 1;
    }
</style>

<div class="card">
    <div class="card-header">
        <h2>品种列表</h2>
    </div>
    <div class="card-body">
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th data-sort="id">ID</th>
                        <th data-sort="name">名称</th>
                        <th data-sort="exchange_code">交易代码</th>
                        <th data-sort="margin">保证金</th>
                        <th data-sort="stoploss">止损点数</th>
                        <th data-sort="takeprofit">止盈点数</th>
                        <th data-sort="limit_stoploss">止损限制</th>
                        <th data-sort="mtp">止损止盈周期</th>
                        <th data-sort="dks">开仓方向</th>
                        <th data-sort="is_monitored">监控状态</th>
                        <th data-sort="add_time">添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>{{ product.id }}</td>
                        <td>{{ product.name }}</td>
                        <td>{{ product.exchange_code }}</td>
                        <td>{{ product.margin }}</td>
                        <td>{{ product.stoploss }}</td>
                        <td>{{ product.takeprofit }}</td>
                        <td>{{ product.limit_stoploss }}</td>
                        <td>{{ product.mtp }}</td>
                        <td>{{ product.dks }}</td>
                        <td>
                            {% if product.is_monitored == 1 %}
                            <span class="badge badge-success">监控中</span>
                            {% else %}
                            <span class="badge badge-warning">未监控</span>
                            {% endif %}
                        </td>
                        <td>{{ product.add_time }}</td>
                        <td>
                            {% if request.state.user_type in ['super_admin', 'admin', 'operator'] %}
                            <a href="/products/{{ product.id }}/edit" class="btn btn-secondary btn-sm">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            {% endif %}
                            {% if request.state.user_type in ['super_admin', 'admin'] %}
                            <a href="/products/{{ product.id }}/delete" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此品种吗？')">
                                <i class="fas fa-trash"></i> 删除
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="12" style="text-align: center;">暂无品种数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}


